<html>
<head>
<title> New DAB Templates</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/jquery.simplecolorpicker.js"></script>

<link rel="stylesheet" href="static/jquery.simplecolorpicker.css">
<style> 

body{
	font-family:Helvetica, sans-serif;
	background:#f8f8f8;
	padding:0;
	margin:0;
}

a{
	text-decoration:none;
}

.toolbar{
	background:#efefef;
	padding:10px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

.toolbar span{
	display:inline-block;
	color:#888;
	font-size:12px;
}
.toolbar a{
	background:#6fc181;
	color:#fff;
	display:inline-block;
	padding:5px 10px;
	margin:0 5px 0;
	border-radius:2px;
	font-size:12px;
	box-shadow:0px 2px 3px rgba(0,0,0,0.4);
}
.toolbar span.divider{
	display:inline-block;
	margin:0 5px;
	background:#ccc;
	width:1px;
	height:16px;
	top:5px;
	position: relative;;
}
.toolbar a.off{
	background:#ccc;
}

.image-off .image{
	display:none;
}
.description-off .description{
	display:none;
}
.title-off .title{
	display:none;
}
.logo-off .logo{
	display:none;
}

.image-off .bg2{
	opacity:1;
}

.logo:before{
	content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.logo img {
  display: inline-block;
  vertical-align: middle;
}

.hideboundingbox-off .logo,
.hideboundingbox-off .text,
.hideboundingbox-off .title,
.hideboundingbox-off .description{
	border:1px solid rgba(255,255,255,0.6);
}
.ads-board{
	position: absolute;
	min-height:600px;
	margin:100px;
	top:44px;
	left:0;
	background:#f8f8f8;
	z-index:1;
	width:100%;
	transition:all 0.4s ease-in-out;
}

.ads-board > div{
	overflow:hidden;
	font-family:'Roboto',sans-serif;
}
	.ad300x250{
		position: absolute;
		top:0;
		left:0;
		width:300px;
		height:250px;
	}
	.ad300x250label{
		position: absolute;
		top:-20px;
		left:0;
		width:300px;
		height:250px;
	font-size:10px;
	}
	.ad336x280{
		position: absolute;
		top:0;
		left:365px;
		width:336px;
		height:280px;
	}
	.ad336x280label{
		position: absolute;
		top:-20px;
		left:365px;
		width:336px;
		height:280px;
	font-size:10px;
	}
	.ad160x600{
		position: absolute;
		top:0;
		left:765px;
		width:160px;
		height:600px;
	}
	.ad160x600label{
		position: absolute;
		top:-20px;
		left:765px;
		width:160px;
		height:600px;
	font-size:10px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad120x600label{
		position: absolute;
		top:-20px;
		left:985px;
		width:120px;
	font-size:10px;
		height:600px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad468x60label{
		position: absolute;
		top:380px;
		left:0;
		width:468px;
		height:60px;
	font-size:10px;
	}
	.ad468x60{
		position: absolute;
		top:400px;
		left:0;
		width:468px;
		height:60px;
	}
	.ad728x90{
		position: absolute;
		top:510px;
		left:0;
		width:728px;
		height:90px;
	}
	.ad728x90label{
		position: absolute;
		top:490px;
		left:0;
		width:728px;
		height:90px;
	font-size:10px;
	}
	.ad320x50{
		position: absolute;
		top:300px;
		left:0;
		width:320px;
		height:50px;
	}
	.ad320x50label{
		position: absolute;
		top:280px;
		left:0;
		width:320px;
		height:50px;
	font-size:10px;
	}

.frosted{
	font-family: 'Open Sans', sans-serif;
}

.title{
	color:#fff;
	font-size:21px;
	font-weight:400;
}

.description{
	color:#333;
	font-size:13px;
	font-weight:400;
	line-height:16px;
}

span.size{
	position: relative;
	top:-25px;
	font-size:10px;
}

.bg2{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#f79552;
	z-index:0;
}
.bg1{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#e06d20;
	z-index:1;
	
}

.image{
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

.button{
	background:#000;
	border-radius:15px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:inline-block;
	padding:0px;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	position:absolute;
	z-index:3;
	overflow:hidden;
	text-overflow:ellipsis;
}


.ad300x250 .logo{
	position:absolute;
	bottom:15px;
	left:20px;
	width:140px;
	z-index:3;
	height:40px;
}

.ad300x250 .logo img{
	max-width:100%;
	max-height:100%;
}
.ad300x250 .bg1{
	top:0;
	right:0;
	left:auto;
	width:125px;
	height:196px;
	border-radius:0 0 0 15px;
	overflow:hidden;
}

.ad300x250 .image{
	top:0;
	right:0;
	left:auto;
	width:125px;
	height:196px;
	border-radius:0 0 0 15px;
	overflow:hidden;
}
.ad300x250 .image img{
	width:auto;
	height:100%;
	margin-left:-100px;
}

.ad300x250 .text{
	position:absolute;
	top:40px;
	left:20px;
	width:140px;
	z-index:3;
}

.ad300x250 .title{
	margin-bottom:15px;
}

.ad300x250 .button{
	bottom:20px;
	right:0px;
	border-radius:15px 0 0 15px;
	min-width:125px;
	max-width:125px;
}

.ad336x280 .logo{
	position:absolute;
	bottom:15px;
	left:20px;
	width:150px;
	z-index:3;
	height:40px;
}

.ad336x280 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad336x280 .image{
	top:0;
	right:0;
	left:auto;
	width:150px;
	height:225px;
	border-radius:0 0 0 15px;
	overflow:hidden;
}
.ad336x280 .bg1{
	top:0;
	right:0;
	left:auto;
	width:150px;
	height:225px;
	border-radius:0 0 0 10px;
	overflow:hidden;
}
.ad336x280 .image img{
	width:auto;
	height:100%;
	margin-left:-100px;
}

.ad336x280 .text{
	position:absolute;
	top:40px;
	left:20px;
	width:150px;
	z-index:3;
}

.ad336x280 .title{
	font-size:23px;
	margin-bottom:15px;
}

.ad336x280 .description{
	font-size:14px;
	line-height:17px;
}

.ad336x280 .button{
	bottom:20px;
	right:0px;
	border-radius:15px 0 0 15px;
	min-width:150px;
	max-width:150px;
}




.ad160x600 .logo{
	position:absolute;
	bottom:20px;
	left:15px;
	width:130px;
	z-index:3;
	height:40px;
}

.ad160x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad160x600 .image,
.ad160x600 .bg1{
	height:250px;
	width:150px;
	border-radius:15px 0 0 15px;
	right:0;
	left:auto;
	top:230px;
}

.ad160x600 .image img{
	margin-left:-80px;
	height:100%;
}

.ad160x600 .text{
	position:absolute;
	top:50px;
	left:15px;
	width:130px;
	z-index:3;
}

.ad160x600 .title{
	font-size:20px;
	font-weight:400;
	margin-bottom:15px;
}

.ad160x600 .description{
	font-size:13px;
	line-height:17px;
}

.ad160x600 .button{
	top:195px;
	right:0px;
	width:150px;
	border-radius:15px 0 0 15px;
}

.ad120x600 .logo{
	position:absolute;
	bottom:20px;
	left:10px;
	width:100px;
	z-index:3;
	height:40px;
}

.ad120x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad120x600 .image,
.ad120x600 .bg1{
	height:230px;
	width:110px;
	border-radius:15px 0 0 15px;
	right:0;
	left:auto;
	top:290px;
}

.ad120x600 .image img{
	margin-left:-100px;
	height:100%;
}

.ad120x600 .text{
	position:absolute;
	top:20px;
	left:10px;
	width:100px;
	z-index:3;
}

.ad120x600 .title{
	font-size:20px;
	font-weight:400;
	margin-bottom:15px;
}

.ad120x600 .description{
	font-size:13px;
	line-height:17px;
}

.ad120x600 .button{
	top:255px;
	right:0px;
	width:110px;
	border-radius:15px 0 0 15px;
}
.ad468x60 .image,
.ad468x60 .bg1{
	
}


.ad468x60 .image,
.ad468x60 .bg1{
	height:55px;
	width:140px;
	border-radius:15px 0 0 0px;
	right:0;
	top:5px;
	left:auto;
}

.ad120x600 .image img{
	margin-left:-100px;
	height:100%;
}


.ad468x60 .logo{
	position:absolute;
	top:10px;
	left:10px;
	width:70px;
	z-index:3;
	height:40px;
}

.ad468x60 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad468x60 .image img{
	
	width:100%;
}

.ad468x60 .text{
	position:absolute;
	top:4px;
	left:95px;
	width:230px;
	z-index:3;
}

.ad468x60 .title{
	font-size:16px;
	font-weight:400;
	margin-bottom:3px;
}

.ad468x60 .description{
	font-size:12px;
	line-height:12px;
}

.ad468x60 .button{
	top:50%;
	margin-top:-15px;
	font-size:12px;
	right:0px;
	width:100px;
	border-radius:15px 0 0 15px;
}

.ad728x90 .logo{
	position:absolute;
	top:10px;
	left:auto;
	right:10px;
	width:150px;
	z-index:3;
	height:35px;
	text-align:right;
}

.ad728x90 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad728x90 .image,
.ad728x90 .bg1{
	width:265px;
	height:80px;
	top:10px;
	left:335px;
	border-radius:15px 15px 0 0;
}

.ad728x90 .image img{
	margin-top:-45px;
	width:100%;
}

.ad728x90 .text{
	position:absolute;
	top:8px;
	left:15px;
	width:300px;
	z-index:3;
}

.ad728x90 .title{
	font-size:24px;
	margin-bottom:3px;
}

.ad728x90 .description{
	font-size:14px;
	font-weight:400;
	line-height:18px;
}

.ad728x90 .button{
	top:52px;
	font-size:12px;
	right:0px;
	width:120px;
	border-radius:15px 0 0 15px;
}



.ad320x50 .logo{
	position:absolute;
	top:5px;
	left:10px;
	width:60px;
	z-index:3;
	height:40px;
}

.ad320x50 .logo img{
	max-width:100%;
	vertical-align:middle;
	max-height:100%;
}

.ad320x50 .image,
.ad320x50 .bg1{
	display:none;
}
.ad320x50 .image img{
	margin-top:-100px;
	width:100%;
}

.ad320x50 .text{
	position:absolute;
	top:5px;
	left:80px;
	width:185px;
	z-index:3;
	height:40px;
}


.ad320x50 .title{
	font-size:14px;
	height:100%;
	 display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

.ad320x50 .description{
	font-size:12px;
	font-weight:400;
	line-height:12px;
	display: flex;
	justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
  height:0;
  opacity:0;
}

.ad320x50 .button{
	top:5px;
	font-size:9px;
	right:0px;
	bottom:5px;
	height:40px;
	width:40px;
	text-indent:-9999em;
	border-radius:25px 0 0 25px;
}

.ad320x50 .button:after{
	content:'';
	display:block;
	background:url(images/borders/arrow.svg) 50% 50% no-repeat;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:50% auto;
}

.specs{
	position:absolute;
	top:44px;
	left:0;
	-webkit-transition:opacity 0.4s ease-in-out;
	transition:opacity 0.4s ease-in-out;
	opacity:0;
}

.specs .wrapper{
	width:600px;
	margin:20px 100px 100px;
	position:relative;
	font-family: 'PT Serif', sans-serif;
}
.specs section:after{
	display:block;
	content:'';
	width:2px;
	top:70px;
	left:0;
	bottom:40px;
	background:#ddd;
	position:absolute;
}
.specs p{
	color:#7E7F7B;
	font-size:16px;
	position:relative;
	padding-left:30px;
	line-height:22px;
}
.specs p:after{
	width:16px;
	height:16px;
	-webkit-border-radius:8px;
	background:#ddd;
	position:absolute;
	content:'';
	display:block;
	top:0;
	left:-7px;
}
.specs h3{
	font-size:29px;
	color:#52544E;
	font-weight:normal;
	padding-left:30px;
}
.specs img{
	margin-left:30px;
}

.ads .specs{
	height:600px;
	overflow:hidden;
	opacity:0;
}

.showspecs .ads-board{
	opacity:0;
}

.showspecs .specs{
	
	opacity:1;
	overflow:auto;
}

@-webkit-keyframes fade {
    0% {opacity: 0; height:0%;}
    5% {opacity: 1; height:100%;}
    50% {opacity: 1; height:100%;}
    55% {opacity: 0; height:0;}
    100% {opacity: 0; height:0;}
}

.ad320x50 .fade{
	 -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}
.ad320x50 .description {
    -webkit-animation-delay: -3s;
}

.image img,
.title,
.description,
.logo,
.button{
	-webkit-transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}


.title{transition-delay:0.2s;}
.description{transition-delay:0.4s;}
.button{transition-delay:0.6s;}


.animate .title,
.animate .logo,
.animate .description{
	transform:translateY(-20px);
	opacity:0;
}
.animate .image img{
	transform:scale(1.2);
}
.animate .button{
	transform:translateX(150px);
}

body.animate:after{
	content:'';
	display:block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff url(images/common/flapper.gif) 50% 50% no-repeat;
	text-align:center;
	vertical-align:middle;
	z-index:1000;
}
</style>
</head>
<body class="ads animate">
<div class="toolbar">
	<span>Toggle elements:</span>
	<a id="logo" href="javascript:;">Logo</a>
	<a id="title" href="javascript:;">Title</a>
	<a id="description" href="javascript:;">Description</a>
	<a id="image" href="javascript:;">Image</a>

	<span class="divider"></span>
	<span>bg1:</span>
	<select name="colorpicker-bg2">
	  <option value="#000000">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>
  
	<span style="margin-left:15px">bg2:</span>
	<select name="colorpicker-bg1">
	  <option value="#7bd148">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>

	<span class="divider"></span>
	<span>Eng tools:</span>
	<a id="hideboundingbox" class="off" href="javascript:;">Toggle bounding box</a>
	<a id="showspecs" class="off" href="javascript:;">Show specs</a>
	<a id="animate" class="off" href="javascript:;">Repeat animation</a>
</div>

<div class="specs">
	<div class="wrapper">
		<section>
			<h3> Image positioning </h3>
			<p> When an image is available, it should always 'fill' the entirety of image container. </p>
		</section>

		<section>
			<h3> Logo size &amp; positioning </h3>
			<p> The logo size should be set by making the logo image 'fit' within the logo area bounding box. </p>
			<p> The default logo position should be top:50% left:0 (i.e. vertically centered and horizontally left-aligned). </p>
			<p> Ideally, the user should be able to move the logo to wherever they wish by dragging it. </p>
		</section>

		<section>
			<h3> Text</h3>
			<p> Default title color is white, and default description color is #333333.</p>
		</section>

		<section>
			<h3> Background color</h3>
			<p> The default background color should be one of these 6 colors. Ideally, we would analyze the main image (or the logo, if an image is not there), and choose the color from our palette that is closest to the predominent color used in the image. These colors were chosen such that they maintain a good contrast ratio with the white and black text used. The user can of course change this color to anyhting they like. </p>
			<img src="images/curvy/specs/palette.png">
		</section>


		<section>
			<h3> Button color</h3>
			<p> The default button background color should be #000000, and the default button text should be white. </p>
		</section>
		
		<section>
			<h3> Vertical alignment of text</h3>
			<p> For the 320x50 ad size, where we alternate the title and decription text, the text should always be vertically centered within the ad. </p>
			<img src="images/frosty/specs/text-alignment.png">
		</section>

		<section>
			<h3> Default font</h3>
			<p> The default font used here is Roboto. </p>
		</section>
	</div>
</div>
<div class="ads-board">
					<span class="ad300x250label">300x250</span>
					<div class="ad300x250">
						<span class="size">300x250</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad336x280label">336x280</span>
					<div class="ad336x280">
						<span class="size">336x280</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad120x600label">120x600</span>
					<div class="ad120x600">
						<span class="size">120x600</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad160x600label">160x600</span>
					<div class="ad160x600">
						<span class="size">160x600</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad468x60label">468x60</span>
					<div class="ad468x60">
							<span class="size">468x60</span>
							<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad728x90label">728x90</span>
					<div class="ad728x90">
						<span class="size">728x90</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<span class="ad320x50label">320x50</span>
					<div class="ad320x50 highlight ft-fragment">
						<span class="size">320x50</span>
						<div class="logo">
							<img src="images/curvy/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
				</div>

<script>

$(window).load(function(){
	setTimeout(function(){$("body").removeClass("animate"); },300);
	setTimeout(function(){$(".ad320x50 .title").addClass("fade");$(".ad320x50 .description").addClass("fade");},1200);
});
$("document").ready(function(){

	$('select[name="colorpicker-bg1"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
	  $(".bg1").css('background-color', $('select[name="colorpicker-bg1"]').val());

	});

	$('select[name="colorpicker-bg2"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
		console.log("k");
	  $(".bg2").css('background-color', $('select[name="colorpicker-bg2"]').val());
	});


	


	$(".toolbar a").click(function(){
		$(this).toggleClass("off");
		var which = $(this).attr("id");
		if (which=="showspecs"){
			$("body").toggleClass("ads").toggleClass("showspecs");
		}
		else if (which=="animate"){
			$("body").addClass("animate").animate({opacity:1},1000,function(){$(this).removeClass("animate")});
		}
		else{
			$(".ads-board").toggleClass(which+"-off");
			$("body").removeClass("showspecs").addClass("ads");
		}
	})
})
</script>
</body>
</html>